<template>
  <view>
    <view class="goods-list" v-for="item in goodsList" :key="item.goods_id" @click="goDetail(item.goods_id)">
      <block>
        <view class="goods-item">
          <!-- 商品左侧图片区域 -->
          <view class="goods-item-left">
            <image :src="item.goods_image" class="goods-pic"></image>
          </view>

          <!-- 商品右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view class="goods-name">{{ item.goods_name }}</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-num">已售{{ item.goods_sales }}件</view>

              <view class="goods-price">￥{{ item.goods_price_max }}</view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    goodsList: {
      type: Array,
      default: []
    }
  },
  methods:{
    goDetail(goodsId){
        // console.log(goodsId)
        uni.navigateTo({
            url:`/pages_sub1/product-detail/product-detail?goodsId=${goodsId}`
        })
    }
  }
}
</script>

<style scoped lang="scss">
.goods-item {
  display: flex;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .goods-item-left {
    margin-right: 10rpx;

    .goods-pic {
      width: 200rpx;
      height: 200rpx;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 26rpx;
      word-break: break-all;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .goods-num {
      font-size: 24rpx;
      color: #999999;
    }

    .goods-price {
      font-size: 32rpx;
      color: #c00000;
    }
  }
}
</style>
